<template>
  <div class="page-wrapper">
    <el-card>
      <!-- 工具栏 -->
      <el-row class="tool-bar" type="flex">
        <el-col>
          <el-button type="primary" size="small" @click="isShowDialog = true">添加房产</el-button>
        </el-col>
        <el-col>
          <el-row type="flex">
            <el-select v-model="searchAgent">
              <!-- 默认选项, 所有经纪 绑定数据为空字符串 -->
              <el-option label="全部经纪" value="" />
              <!-- 遍历列表渲染选项 -->
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select v-model="searchCate">
              <!-- 默认选项, 所有经纪 绑定数据为空字符串 -->
              <el-option label="全部分类" value="" />
              <!-- 遍历列表渲染选项 -->
              <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="searchKeyword" />
            <el-button size="small" @click="search">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 分割线 -->
      <el-divider />
      <!-- 表格 -->
      <el-table :data="list" border>
        <el-table-column label="封面" width="200px">
          <template v-slot="scope">
            <img class="thumbnail" :src="scope.row.image" alt="">
          </template>
        </el-table-column>
        <el-table-column label="标题" prop="title" />
        <el-table-column label="标签" prop="tags">
          <template v-slot="scope">
            <el-tag
              v-for="(item, index) in scope.row.tags"
              :key="index"
            >
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" />
        <el-table-column label="分类" prop="category.title" />
        <el-table-column label="经纪" prop="agent.name" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="介绍" prop="desc" />
        <el-table-column label="图片" prop="photos">
          <template v-slot="scope">
            <img v-for="(item, index) in scope.row.photos" :key="index" class="photo" :src="item" alt="">
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button size="small" type="text" @click="showEditDialog(scope.row.id)">编辑</el-button>
            <el-button size="small" type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分割线 -->
      <el-divider />
      <!-- 分页组件 -->
      <el-row type="flex" justify="center">
        <el-pagination
          :page-size="size"
          :total="total"
          :current-page="page"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <AddDialog ref="addDialog" :is-show-dialog="isShowDialog" />
  </div>
</template>

<script>
import { getPropertiesList, getPropertyDetailById, getPropertiesNumber } from '@/api/properties'
import { getAgentList } from '@/api/agent'
import { getCateList } from '@/api/category'
import AddDialog from './components/add-dialog.vue'
export default {
  components: {
    AddDialog
  },
  data() {
    return {
      // 筛选选项列表
      agentList: [],
      categoryList: [],
      list: [],
      searchAgent: '',
      searchCate: '',
      searchKeyword: '',
      isShowDialog: false,
      // 翻页相关
      // 旧风格数据, 前端偏好
      // 其实可以保留给自己看, 方便管理
      page: 1,
      size: 2,
      total: 0
    }
  },
  async created() {
    // 表格渲染
    this.loadPage()
    // 筛选条件中的分类列表
    this.categoryList = await getCateList()
    // 筛选条件中的经纪列表
    this.agentList = await getAgentList()
  },
  methods: {
    search() {
      // 每次搜索回到第一页
      this.page = 1
      // // 这里触发需要筛选, 发送请求即可, 其实可以服用 loadPage 只需要根据用户数据圈定参数即可
      this.loadPage()
    },
    async loadPage() {
      // 只需要知道后端要求的参数跟前端想法不一样, 每次计算出来即可
      this.list = await getPropertiesList({
        _limit: this.size,
        _start: (this.page - 1) * this.size,
        // 演示搜索参数可能性
        // 1. 如果是相关数据对象形式如分类/经纪, 筛选时带 id, 必须完全匹配
        // 2. 如果是字符串属性, 带上字符串即可, _contains 属性后缀指定的是只要包含特定字符即可, 无需完全匹配
        // 用 Null 数据可以兼容有或者没有参数的两种状态
        // axios 发请求会自动忽略 null 参数
        category: this.searchCate || null,
        agent: this.searchAgent || null,
        title_contains: this.searchKeyword || null
      })
      // 总条数也得加载
      // 总条数也能接受筛选条件
      // 如果什么都没有, 全部总条数
      // 如果带上分类公寓, 那么就是公寓总条数
      // 根据用户的输入, 动态决定即可
      // 还要注意api有没有接受参数
      this.total = await getPropertiesNumber({
        category: this.searchCate || null,
        agent: this.searchAgent || null,
        title_contains: this.searchKeyword || null
      })
    },
    currentChange(newPage) {
      this.page = newPage
      this.loadPage()
    },
    async showEditDialog(id) {
      // 根据id获取详情
      const res = await getPropertyDetailById(id)
      console.log(res)
      // 通过 ref 放入子组件弹窗的表单当中
      // 注意特殊处理分类和经纪人, 拿到的数据是对象, 但是选择框只需要其中id即可
      this.$refs.addDialog.formData = {
        ...res,
        agent: res.agent.id,
        category: res.category.id
      }

      // 要在这里拿到子组件里面的上传图片子组件(孙子组件)
      // 注意要等弹窗渲染完才能获取到弹窗内的上传组件
      this.$nextTick(() => {
        console.log(this.$refs.addDialog.$refs.image.fileList)
        // 注意上传组件要求的数据格式是 [{url: xxxxx}]
        // 我们本身拿到的是字符串
        if (res.image) {
          this.$refs.addDialog.$refs.image.fileList = [{
            url: res.image
          }]
        }
        // 多图片的数组需要按照需求改造
        // this.$refs.addDialog.$refs.photo.fileList = [
        //   {url: xxx},
        //   {url: xxx},
        //   {url: xxx}
        // ]
        this.$refs.addDialog.$refs.photo.fileList = res.photos.map(item => {
          return {
            url: item
          }
        })
      })
      // 弹出弹窗
      this.isShowDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  padding: 20px;
}
.thumbnail {
  width: 180px;
  height: 100px;
  // 处理图片宽高比跟设定宽高不一样
  object-fit: cover;
}
.photo {
  width: 50px;
  height: 50px;
  object-fit: cover;
}
</style>
